﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Forms</title>
    <link rel="stylesheet" href="styles/index.css">
</head>
<body>
<header>
    <h1>Demo Forms</h1>
</header>
<main>
    <form action="/" method="GET">
        <section>
            <h2>Your personal details</h2>
            <ul>
                <li>
                    <label for="username">Your name</label>
                    <input type="text" name="user-name" id="username" required placeholder="Enter your name"/>
                </li>
                <li>
                    <label for="useremail">Your email address</label>
                    <input type="email" name="user-email" id="useremail" placeholder="Enter your email address"/>
                </li>
                <li>
                    <label for="userpassword">Your password</label>
                    <input type="password" name="user-password" id="userpassword" required minlength="7"/>
                </li>
            </ul>
        </section>
        <section>
            <h2>More details</h2>
            <ul>
                <li>
                    <label for="userage">Your age</label>
                    <input type="number" step="1" name="user-age" id="userage" required min="18" max="100"/>
                </li>
                <li>
                    <label for="birthday">Your birthday</label>
                    <input type="date" id="birthday" name="user-birthday" required min="1900-01-01" max="2099-12-31"/>
                </li>
                <li>
                    <label for="favorite-color">Your favorite color?</label>
                    <select id="favorite-color" name="favoriteColor">
                        <option value="blue">My favorite color is blue</option>
                        <option value="black">Black</option>
                        <option value="red">Red</option>
                    </select>
                </li>
            </ul>
        </section>

        <section>
            <label for="usermessage">Your message</label>
            <textarea id="usermessage" name="user-message" rows="8"></textarea>
        </section>

        <section>
            <h2>How should we verify your account?</h2>
            <ul>
                <li class="form-control-inline">
                    <input type="radio" name="verify" id="verify-text-message" value="text-message"/>
                    <label for="verify-text-message">Via text message (SMS)</label>
                </li>
                <li class="form-control-inline">
                    <input type="radio" name="verify" id="verify-phone" value="phone"/>
                    <label for="verify-phone">Via a phone call</label>
                </li>
                <li class="form-control-inline">
                    <input type="radio" name="verify" id="verify-email" value="email"/>
                    <label for="verify-email">Via an email</label>
                </li>
            </ul>
        </section>

        <section>
            <h2>How should we contack you?</h2>
            <ul>
                <li class="form-control-inline">
                    <input type="checkbox" id="contact-email" name="contact" value="email"/>
                    <label for="contact-email">Contact me via email</label>
                </li>
                <li class="form-control-inline">
                    <input type="checkbox" id="contact-phone" name="contact" value="phone"/>
                    <label for="contact-phone">Contact me via phone</label>
                </li>
            </ul>
        </section>

        <hr>

        <section>
            <div class="form-control-inline">
                <input type="checkbox" id="agree-terms" name="terms"/>
                <label for="agree-terms">Agree to terms?</label>
            </div>
        </section>

        <section>
            <button type="submit">Submit</button>
        </section>

    </form>
</main>

</body>
</html>